<template>
  <div class="xtx-home-page">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <home-category />
        <div class="home-banner">
          <!-- 轮播图 -->
          <xtx-carousel :sliders="sliders"></xtx-carousel>
        </div>
        <!-- 新鲜好物 -->
        <home-new></home-new>
        <!-- 人气推荐 -->
        <home-hot></home-hot>
        <!-- 热门品牌 -->
        <home-brand></home-brand>
      </div>
    </div>
  </div>
</template>

<script>
import HomeCategory from './components/homeCategory.vue'
import { getBannerListAPI } from '@/api'
import { onMounted, ref } from 'vue'
import HomeNew from './components/homeNew.vue'
import HomeHot from './components/homeHot.vue'
import HomeBrand from './components/homeBrand.vue'
export default {
  name: 'XtxHomePage',
  components: {
    HomeCategory,
    HomeNew,
    HomeHot,
    HomeBrand
  },
  setup () {
    const sliders = ref([]) // 轮播图数据
    onMounted(async () => {
      const res = await getBannerListAPI({
        num: 1 // 首页数据
      })
      sliders.value = res.result
    })

    return {
      sliders
    }
  }
}
</script>

<style lang="less" scoped>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  .xtx-carousel {
    width: 100%;
    height: 100%;
    :deep(.carousel-btn.prev) {
      left: 270px;
    }
    :deep(.carousel-indicator) {
      padding-left: 250px;
    }
  }
}
</style>
